<template>
  <div>
    <div class='float-button'
         ref='floatButton'
         :style="{
            left: safeLeft,
            top: safeTop,
            width: width + 'px',
            height: height + 'px',
            'transition': isStartDrag ? 'none' : 'all .2s',
            'display': isShow ? 'block' : 'none'
        }"
         @mousedown.prevent.stop='dragStart'
         :animation='animation'>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //  距离左边的百分比
    x: {
      type: Number,
      default: 0
    },
    //  距离右边的百分比
    y: {
      type: Number,
      default: 0
    },
    //  宽度
    width: {
      type: Number,
      default: 50
    },
    //  高度
    height: {
      type: Number,
      default: 50
    },
    //  离页面边上的距离
    padding: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      isShow: false,
      isStartDrag: false,
      start: [0, 0],
      moveY: null,
      moveX: null,
      windowWidth: null,
      windowHeight: null,
      animation: {},
      timeout: null,
      time: null
    }
  },
  computed: {
    safeLeft() {
      let maxX = this.windowWidth - this.width - this.padding
      let minX = this.padding
      if (this.moveX == null) {
        let safeX = (this.x / 100) * this.windowWidth
        return safeX > maxX ? maxX + 'px' : (safeX < minX) ? minX + 'px' : safeX + 'px'
      }
      return this.moveX > maxX ? maxX + 'px' : (this.moveX < minX) ? minX + 'px' : this.moveX + 'px'
    },
    safeTop() {
      let maxY = this.windowHeight - this.height - this.padding
      let minY = this.padding
      if (this.moveY == null) {
        let safeY = (this.y / 100) * this.windowHeight
        return safeY > maxY ? maxY + 'px' : (safeY < minY) ? minY + 'px' : safeY + 'px'
      }
      return this.moveY > maxY ? maxY + 'px' : (this.moveY < minY) ? minY + 'px' : this.moveY + 'px'
    }
  },
  mounted() {
    this.init()
    this.$nextTick(() => {
      this.isShow = true
    })
    window.addEventListener('mousemove', this.dragMove)
    window.addEventListener('mouseup', this.dragStop)
    window.addEventListener('resize', this.init)
  },
  unmounted() {
    window.removeEventListener('mousemove', this.dragMove)
    window.removeEventListener('mouseup', this.dragStop)
    window.removeEventListener('resize', this.init)
  },
  methods: {
    init() {
      console.log('init')
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight
    },
    dragStart(event) {
      this.isStartDrag = true
      this.start[0] = event.clientX - this.$refs.floatButton.offsetLeft
      this.start[1] = event.clientY - this.$refs.floatButton.offsetTop
      this.time = new Date()
    },
    //判断防止悬浮球被拖出页面
    dragMove(event) {
      if (this.isStartDrag) {
        this.isMove = true
        const touch = event
        this.moveX = touch.clientX - this.start[0]
        this.moveY = touch.clientY - this.start[1]
      }
    },
    dragStop(event) {
      console.log(this.isMove)
      console.log(this.isStartDrag)
      console.log()
      if (this.isStartDrag) {
        if (new Date() - this.time < 200 || !this.isMove) {
          this.isStartDrag = false
          this.$emit('select')
        } else {
          const touch = event
          this.moveX = touch.clientX - this.start[0]
          this.moveY = touch.clientY - this.start[1]
          this.isStartDrag = false
          // 判断在左侧还是右侧
          if (this.moveX > this.windowWidth / 2) {
            this.moveX = this.windowWidth - this.width - this.padding
          } else {
            this.moveX = 0
          }
        }
        this.isMove = false
        this.isStartDrag = false
      }
    }
  }
}
</script>

<style scoped>
.float-button {
  position: fixed;
  z-index: 999;
  transition: all .2s;
}
</style>